<template>
<div class="wantWaike">
  <div class="top-title">
    <div class="one-title">
      <img class="bt-svg" src="http://mcgamehome.love/img2/1608bc48b06b37a5931582969f362916493f86ea.png" >
      <span class="title-one span-def">猜你想追</span>
    </div>
    <div class="button">
      <button type="button" class="titleButton">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-heart-fill" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/>
          <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm4 5.982c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018Z"/>
        </svg>
        <span class="marl5 span-def">我的追番</span>
      </button>
    </div>
  </div>
  <div class="wantOne">
    <div class="wantImg">
      <img src="http://mcgamehome.love/img2/6.png" alt="http://mcgamehome.love/img2/6.png">
      <div class="background-cover"></div>
      <div class="videoDataBox">
        <span class="spanSmW marl10">
          <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-v-ef84dfc4=""><path fill-rule="evenodd" clip-rule="evenodd" d="M2.8847 1.42384C3.93469 1.338 5.42932 1.25 7.14282 1.25C8.85649 1.25 10.3512 1.33802 11.4012 1.42386C12.1201 1.48264 12.6775 2.03239 12.7419 2.74544C12.8198 3.60669 12.8928 4.74891 12.8928 6C12.8928 7.25109 12.8198 8.39331 12.7419 9.25456C12.6775 9.96761 12.1201 10.5174 11.4012 10.5761C10.3512 10.662 8.85649 10.75 7.14282 10.75C5.42932 10.75 3.93469 10.662 2.8847 10.5762C2.16571 10.5174 1.60821 9.96746 1.54377 9.25423C1.46592 8.39261 1.39282 7.25018 1.39282 6C1.39282 4.74982 1.46592 3.60739 1.54377 2.74577C1.60821 2.03254 2.16571 1.48262 2.8847 1.42384ZM7.14282 0.25C5.39621 0.25 3.8737 0.339649 2.80322 0.427162C1.60472 0.525142 0.656505 1.45293 0.547827 2.65579C0.468027 3.53903 0.392822 4.71246 0.392822 6C0.392822 7.28754 0.468026 8.46097 0.547827 9.34421C0.656505 10.5471 1.60472 11.4749 2.80322 11.5728C3.8737 11.6604 5.39621 11.75 7.14282 11.75C8.8896 11.75 10.4122 11.6603 11.4827 11.5728C12.681 11.4748 13.6292 10.5473 13.7379 9.34455C13.8177 8.46163 13.8928 7.28841 13.8928 6C13.8928 4.71159 13.8177 3.53837 13.7379 2.65545C13.6292 1.4527 12.681 0.525159 11.4827 0.427188C10.4122 0.339666 8.8896 0.25 7.14282 0.25ZM8.89286 6.57762C9.33731 6.32102 9.33731 5.67952 8.89286 5.42292L6.39188 3.97898C5.94744 3.72238 5.39188 4.04313 5.39188 4.55633V7.44422C5.39188 7.95742 5.94744 8.27817 6.39188 8.02157L8.89286 6.57762Z" fill="white" data-v-ef84dfc4=""></path></svg>
        <span class="marl10">0</span>
        </span>
        <span class="spanSmW marr10">猜你喜欢</span>
      </div>
    </div>
    <div class="span-out-hid">
      <span class="span-def">孤独摇滚</span>
    </div>
    <div class="spanSm">
      <span >女孩们的乐队梦想</span>
    </div>
  </div>
</div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.marl5{
  margin-left: 5px;
}
.button{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}
.titleButton{
  border: 1px solid #E3E5E7;
  height: 40px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  border-radius: 4px;
  background-color: #fff;
  color: #424242;
}
.titleButton:hover{
  background-color: #E3E5E7;
  color: hotpink;
}
.bt-svg{
  width: 35px;
}
.top-title,.tv-waike{
  display: flex;
  position: relative;
  justify-content: space-between;
}
.one-title{
  display: flex;
  align-items: center;
  margin: 15px 0;
}
.title-one{
  font-size: 25px;
}
.span-def{
  font-family: "黑体";
  font-weight: bold;
}
.marl10{
  margin-left: 10px;
}
.marr10{
  margin-right: 10px;
}
.videoDataBox{
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: space-between;
  margin-bottom: 5px;
}
.spanSmW{
  font-family: "黑体";
  font-weight: 600;
  font-size: 14px;
  color: white;
  height: 17px;
  line-height: 17px;
  z-index: 5;
}
.spanSm{
  font-family: "黑体";
  font-weight: 550;
  font-size: 12px;
  color: gray;
  height: 17px;
  line-height: 17px;
}
.span-out-hid{
  width: 100%;
  font-family: "黑体";
  font-weight: 550;
  font-size: 16px;
  color: #18191c;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  margin: 5px 0 2px 0;
}
.wantImg>img{
  width: 100%;
}
.wantImg{
  border-radius: 4px;
  overflow:hidden;
  display: flex;
  position: relative;
}
.background-cover{
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  z-index: 2;
  background: linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.00386607) 8.07%,rgba(0,0,0,.0152486) 15.54%,
  rgba(0,0,0,.033824) 22.5%,rgba(0,0,0,.0592687) 29.04%,rgba(0,0,0,.0912593) 35.26%,rgba(0,0,0,.129472) 41.25%,
  rgba(0,0,0,.173583) 47.1%,rgba(0,0,0,.22327) 52.9%,rgba(0,0,0,.278208) 58.75%,rgba(0,0,0,.338074) 64.74%,
  rgba(0,0,0,.402545) 70.96%,rgba(0,0,0,.471296) 77.5%,rgba(0,0,0,.544005) 84.46%,rgba(0,0,0,.620347) 91.93%,rgba(0,0,0,.7));

}
@media screen and (min-width: 2061px) {
  .wantWaike {
    max-width: 1780px;
    margin: 0 auto;
  }
  .wantOne{
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(16.67% - 16.67px);
    flex: 0 0 calc(16.67% - 16.67px);
    width: calc(16.67% - 16.67px);
    margin-right: 20px;
  }
}
@media screen and (min-width: 1559.8px) and (max-width: 2060.8px) {
  .wantOne {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(16.67% - 16.67px);
    flex: 0 0 calc(16.67% - 16.67px);
    width: calc(16.67% - 16.67px);
    margin-right: 20px;
  }
  .wantWaike{
    margin: 0 140px;
  }
}

@media screen and (min-width: 1400px) and (max-width: 1559.8px) {
  .wantOne {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(16.67% - 16.67px);
    flex: 0 0 calc(16.67% - 16.67px);
    width: calc(16.67% - 16.67px);
    margin-right: 20px;
  }
  .wantWaike{
    margin: 0 60px;
  }
}
@media screen and (min-width: 1301px) and (max-width: 1399.8px) {
  .wantOne {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(20% - 16px);
    flex: 0 0 calc(20% - 16px);
    width: calc(20% - 16px);
    margin-right: 20px;
  }
  .wantWaike {
    width: 1180px;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1140px) and (max-width: 1300.8px) {
  .wantOne {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(20% - 16px);
    flex: 0 0 calc(20% - 16px);
    width: calc(20% - 16px);
    margin-right: 20px;
  }
  .wantWaike{
    margin: 0 60px;
  }
}
@media screen and (max-width: 1139.8px) {
  .wantOne {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(20% - 16px);
    flex: 0 0 calc(20% - 16px);
    width: calc(20% - 16px);
    margin-right: 20px;
  }
  .wantWaike{
    width: 1020px;
    margin: 0 auto;
  }
}
.wantWaike{
  display: flex;
  flex-direction: column;
  margin-top: 25px;
  margin-bottom: 15px;
}
</style>
